<template>
  <div id="app">
    <!-- 路由占位符 -->
    <!-- <router-view></router-view> -->

    <button @click="changeDOMColor">获取DOM对象</button>
    <h1 ref="myh1">哈哈，我是h1</h1>
    <h3 ref="myh3">~~~~~~</h3>
    <!-- ref 既可以引用页面上的 DOM 元素，也可以引用页面上的 Vue组件实例对象 -->

    <hr />
    <button @click="getComInstance">获取Test组件的实例对象</button>

    <my-test ref="mytest"></my-test>
  </div>
</template>

<script>
import Test from './test/Test.vue'

export default {
  name: 'app',
  methods: {
    changeDOMColor() {
      // 原则：在 Vue 项目中，不要使用 Jquery 或 原生获取 DOM 的API；
      console.log(this)
      this.$refs.myh1.style = 'color: red'
    },
    // 获取 组件的实例对象
    getComInstance() {
      console.log(this)
      // this.$refs.mytest.comName = 'MyTest'
      this.$refs.mytest.changeName('你爸爸想让你叫 MyTest')
    }
  },
  components: {
    'my-test': Test
  }
}
</script>

<style scoped>
h3 {
  color: blue;
}
</style>
